(function (params) {
    var myChar = echarts.init(document.querySelector('.bar .chart'))
    var option = {
        color: ['#467fd3'],
        // 修改图表大小
        grid: {
            left: '0%',
            top: '10px',
            right: '0%',
            bottom: '4%',
            // 是否显示刻度标签 如果是true 就显示 否则反之
            containLabel: true
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: ["旅游","培训", "游戏", "医疗", "电商", "社交", "金融"],
            axisLabel: {
                color: 'rgba(255,255,255,.6)',
                fontSize: '12'
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: 'rgba(255,255,255,.6)',
                fontSize: '12'
            },
            axisLine: {
               lineStyle: {
                   color: 'rgba(255,255,255,.1)',
                   width: '2'
               }
            },
            // y轴分格线样式
            splitLine: {
                lineStyle: {
                   color: "rgba(255,255,255,.1)"
                 }
            }
        },
        series: [{
            // 修改柱子宽度
            barWidth: "35%",
            itemStyle: {
                // 修改柱子圆角
                barBorderRadius: 5
            },
            data: [200, 300, 300, 900, 1500, 1200, 600],
            type: 'bar'
        }]
    }
    myChar.setOption(option)
    // 自适应
    window.addEventListener("resize", function() {
        myChar.resize()
    })
})();

(function (params) {
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    var myChar = echarts.init(document.querySelector('.bar2 .chart'))
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '22%',
            top: '10%',
            bottom: '10%',
            // containLabel: true
        },
        xAxis: {
           show: false
        },
        yAxis: [{
            type: 'category',
            data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
            //不显示y轴线条
            axisLine: {
                show: false
            },
            // 不显示刻度
            axisTick: {
                show: false
            },
            axisLabel: {
                color: "#fff"
            },
            inverse: true
        },
        {
            show: true,
            data: [702, 350, 610, 793, 664],
               // 不显示y轴的线
            axisLine: {
                show: false
            },
            // 不显示刻度
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                fontSize: 12,
                color: "#fff"
                }
            },
            inverse: true
          }
        ],
        series: [
            {
                name: '条',
                type: 'bar',
                data: [70, 34, 60, 78, 69],
                // 柱子设为圆角
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        // 柱子设置不同颜色
                        color: function(pa) {
                            return myColor[pa.dataIndex]
                        }  
                    }
                },
                // 柱子之间的距离
                barCategoryGap: 50,
                //柱子的宽度
                barWidth: 10,
                label: {
                    normal: {
                        show: true,
                        // 图形内显示
                        position: "inside",
                        // 文字的显示格式
                        formatter: "{c}%"
                    }
                },
                yAxisIndex: 0
            },
            {
                name: '框',
                type: 'bar',
                data: [100, 100, 100, 100, 100],
                // 柱子之间的距离
                barCategoryGap: 50,
                //柱子的宽度
                barWidth: 15,
                itemStyle: {
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3,
                    barBorderRadius: 15
                },
                yAxisIndex: 1
            }
        ]
    }
    myChar.setOption(option)
    // 自适应
    window.addEventListener("resize", function() {
        myChar.resize()
    })
})();

(function (params) {
    var yearData = [
        {
          year: '2020',  // 年份
          data: [  // 两个数组是因为有两条线
               [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
               [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ]
        },
        {
          year: '2021',  // 年份
          data: [  // 两个数组是因为有两条线
               [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
               [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
            ]
        }
    ];
    var myChar = echarts.init(document.querySelector('.line .chart'))
    option = {
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#4c9bfd'
            },
            right: '10%',
            top: '2%',
            // data: ['邮件营销', '联盟广告']
        },
        grid: {
            left: '3%',
            top: '20%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
            show: true,
            borderColor: '#012f4a'
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            },
            iconStyle: {
                borderColor: '#4c9bfd'
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4c9bfd'
            },
            axisLine: {
                show: false
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4c9bfd'
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a'
                }
            }
        },
        series: [
            {
                name: '新增粉丝',
                smooth: true,
                type: 'line',
                stack: '总量',
                data: yearData[0].data[0]
            },
            {
                name: '新增游客',
                smooth: true,
                type: 'line',
                stack: '总量',
                data: yearData[0].data[1]
            }
        ]
    }
    myChar.setOption(option)
    // 自适应
    window.addEventListener("resize", function() {
        myChar.resize()
    })

    $('.line h2').on('click', 'a', function () {
        option.series[0].data = yearData[$(this).index()].data[0]
        option.series[1].data = yearData[$(this).index()].data[1]
        myChar.setOption(option)
    })
})();

(function (params) {
    var myChar = echarts.init(document.querySelector('.line2 .chart'))
    var option = {
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            textStyle: {
                color: 'rgba(255,255,255,.5)'
            },
            top: '0',
            fontSize: '12',
            data: ['邮件营销', '联盟广告']
        },
        grid: {
            top: '30',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                axisLabel: {
                    textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: 12
                    }
                },
                // x轴线的颜色为   rgba(255,255,255,.2)
                axisLine: {
                    lineStyle: {
                    color: "rgba(255,255,255,.2)"
                    }
                },
                data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"]
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisTick: { show: false },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                // 修改分割线的颜色
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: '邮件营销',
                type: 'line',
                smooth: true,
                areaStyle: {},
                lineStyle: {
                    color: '#0184d5',
                    with: '2'
                },
                // 填充区域
                areaStyle: {
                    // 渐变色，只需要复制即可
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                        {
                            offset: 0,
                            color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                        },
                        {
                            offset: 0.8,
                            color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                        }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                // 设置拐点 小圆点
                symbol: "circle",
                // 拐点大小
                symbolSize: 8,
                // 设置拐点颜色以及边框
                itemStyle: {
                        color: "#0184d5",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                },
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40]
            },
            {
                name: '联盟广告',
                type: 'line',
                smooth: true,
                areaStyle: {},
                lineStyle: {
                    color: '#00d887',
                    with: '2'
                },
                // 设置拐点 小圆点
                symbol: "circle",
                // 拐点大小
                symbolSize: 5,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#00d887",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: "rgba(0, 216, 135, 0.4)"
                          },
                          {
                            offset: 0.8,
                            color: "rgba(0, 216, 135, 0.1)"
                          }
                        ],
                        false
                      ),
                      shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                  },
                  // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20]
            }
        ]
    }
    myChar.setOption(option)
    // 自适应
    window.addEventListener("resize", function() {
        myChar.resize()
    })
})();

(function (params) {
    var myChar = echarts.init(document.querySelector('.pie .chart'))
    var option = {
        color: [
            "#065aab",
            "#066eab",
            "#0682ab",
            "#0696ab",
            "#06a0ab",
        ],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/> {b}: {c} ({d}%)"
        },
        // legend: {
        //     // 距离底部为0%
        //     bottom: "0",
        //     // 小图标的宽度和高度
        //     itemWidth: 10,
        //     itemHeight: 10,
        //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        //     // 修改图例组件的文字为 12px
        //     textStyle: {
        //       color: "rgba(255,255,255,.5)",
        //       fontSize: "12"
        //     }
        // },
        series: [
            {
                // name: '访问来源',
                type: 'pie',
                center: ["50%", "50%"],
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: [
                    { value: 1, name: "0岁以下" },
                    { value: 4, name: "20-29岁" },
                    { value: 2, name: "30-39岁" },
                    { value: 2, name: "40-49岁" },
                    { value: 1, name: "50岁以上" }
                ]
            }
        ]
    };
    myChar.setOption(option)
    // 自适应
    window.addEventListener("resize", function() {
        myChar.resize()
    })
})();

(function (params) {
    var myChar = echarts.init(document.querySelector('.map .chart'))
    var option;
var data = [
    {
        name: '北京',
        value: [116.24, 39.55, 100],
    },

    {
        name: '重庆',
        value: [106.54, 29.59],
    },
    {
        name: '浙江',
        value: [120.19, 30.26],
    },
];

option = {
    geo: {
        map: 'china',
        aspectScale: 0.85,
        layoutCenter: ['50%', '50%'],
        layoutSize: '100%',
        itemStyle: {
            normal: {
                shadowColor: '#276fce',
                shadowOffsetX: 0,
                shadowOffsetY: 15,
                opacity: 0.5,
            },
            emphasis: {
                areaColor: '#276fce',
            },
        },
        regions: [
            {
                name: '南海诸岛',
                itemStyle: {
                    areaColor: 'rgba(0, 10, 52, 1)',
                    borderColor: 'rgba(0, 10, 52, 1)',
                    normal: {
                        opacity: 0,
                        label: {
                            show: false,
                            color: '#009cc9',
                        },
                    },
                },
                label: {
                    show: false,
                    color: '#FFFFFF',
                    fontSize: 12,
                },
            },
        ],
    },
    series: [
        {
            type: 'map',
            mapType: 'china',
            aspectScale: 0.85,
            layoutCenter: ['50%', '50%'], //地图位置
            layoutSize: '100%',
            zoom: 1, //当前视角的缩放比例
            // roam: true, //是否开启平游或缩放
            scaleLimit: {
                //滚轮缩放的极限控制
                min: 1,
                max: 2,
            },
            itemStyle: {
                normal: {
                    areaColor: '#0c274b',
                    borderColor: '#1cccff',
                    borderWidth: 1.5,
                },
                emphasis: {
                    areaColor: '#02102b',
                    label: {
                        color: '#fff',
                    },
                },
            },
        },
        {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            symbolSize: 10,
            rippleEffect: {
                period: 3,
                scale: 5,
                brushType: 'fill',
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}',
                    color: '#b3e2f2',
                    fontWeight: 'bold',
                    fontSize: 18,
                },
            },

            data: data,
            itemStyle: {
                normal: {
                    show: true,
                    color: '#a68625',
                    shadowBlur: 20,
                    shadowColor: '#fff',
                },
                emphasis: {
                    areaColor: '#f00',
                },
            },
        },
        {
            type: 'lines',
            zlevel: 1, //设置这个才会有轨迹线的小尾巴
            polyline: true,
            effect: {
                show: true,
                period: 4,
                trailLength: 0.7,
                color: '#fff', //流动点颜色
                symbol: 'arrow',
                symbolSize: 6,
            },
            lineStyle: {
                normal: {
                    color: '#fff', //线条颜色
                    width: 1.5,
                    curveness: 0.2,
                    shadowColor: '#fff',
                },
            },
            data: [
                {
                    fromName: '北京',
                    toName: '重庆',
                    coords: [
                        [116.24, 39.55, 100],
                        [106.54, 29.59],
                    ],
                },
                {
                    fromName: '重庆',
                    toName: '浙江',
                    coords: [
                        [106.54, 29.59],
                        [120.19, 30.26],
                    ],
                },
                {
                    fromName: '浙江',
                    toName: '北京',
                    coords: [
                        [120.19, 30.26],
                        [116.24, 39.55, 100],
                    ],
                },
            ],
        },
        {
            type: 'lines',
            zlevel: 1,
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: '#fff',
                symbolSize: 3,
            },
            lineStyle: {
                normal: {
                    color: '#ffa022',
                    width: 0,
                    curveness: 0.2,
                },
            },
            data: [
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [121.4648, 31.2891],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [113.5107, 23.2196],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [122.2229, 39.4409],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [108.479, 23.1152],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [116.0046, 28.6633],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [91.1865, 30.1465],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [125.8154, 44.2584],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [110.3467, 41.4899],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [107.7539, 30.1904],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [119.4543, 31.5582],
                    },
                ],
            ],
        },
        {
            type: 'lines',
            zlevel: 2,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: 'arrow',
                symbolSize: 15,
            },
            lineStyle: {
                normal: {
                    color: '#ffa022',
                    width: 1,
                    opacity: 0.4,
                    curveness: 0.2,
                },
            },
            data: [
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [121.4648, 31.2891],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [113.5107, 23.2196],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [122.2229, 39.4409],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [108.479, 23.1152],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [116.0046, 28.6633],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [91.1865, 30.1465],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [125.8154, 44.2584],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [110.3467, 41.4899],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [107.7539, 30.1904],
                    },
                ],
                [
                    {
                        coord: [116.4551, 40.2539],
                    },
                    {
                        coord: [119.4543, 31.5582],
                    },
                ],
            ],
        },
        {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                brushType: 'stroke',
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}',
                },
            },
            itemStyle: {
                normal: {
                    color: '#ffa022',
                },
            },
            data: [
                {
                    name: '上海',
                    value: [121.4648, 31.2891, 95],
                },
                {
                    name: '广州',
                    value: [113.5107, 23.2196, 90],
                },
                {
                    name: '大连',
                    value: [122.2229, 39.4409, 80],
                },
                {
                    name: '南宁',
                    value: [108.479, 23.1152, 70],
                },
                {
                    name: '南昌',
                    value: [116.0046, 28.6633, 60],
                },
                {
                    name: '拉萨',
                    value: [91.1865, 30.1465, 50],
                },
                {
                    name: '长春',
                    value: [125.8154, 44.2584, 40],
                },
                {
                    name: '包头',
                    value: [110.3467, 41.4899, 30],
                },
                {
                    name: '重庆',
                    value: [107.7539, 30.1904, 20],
                },
                {
                    name: '常州',
                    value: [119.4543, 31.5582, 10],
                },
            ],
        },
    ],
};
    myChar.setOption(option)
    // 自适应
    window.addEventListener("resize", function() {
        myChar.resize()
    })
})();